<!DOCTYPE html>
<html>
    <head>
        <!-- 页面meta -->
        <meta charset="utf-8">
<!--        <meta http-equiv="X-UA-Compatible" content="IE=edge">-->
        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />
        <title>汽车租赁</title>
        <meta name="description" content="汽车租赁">
        <meta name="keywords" content="汽车租赁">
        <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
        <!-- 引入样式 -->
        <link rel="stylesheet" href="../plugins/elementui/index.css">
        <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
        <link rel="stylesheet" href="../css/style.css">

        <style>
            .grid-content {
                border-radius: 4px;
                min-height: 40px;
            }
            .box{
                border: 0px;
            }
            .box1{
                background-color: #2e8ded;
            }
            .box2{
                background-color: #009f95;
                position: relative;
                left: 8px;
            }
            .box3{
               background-color: #e6a23c;
                position: relative;
                right: -14px;
            }
            .box4 {
                background-color: #dd6161;
                position: relative;
                left: 23px;
            }
            .memberData{
                padding: 10px;
                border-bottom: 0px;

            }
            .el-card__body{
                padding: 33px;
                position: relative;
                left: 89px;
            }
        </style>
    </head>
    <body class="hold-transition">
        <div id="app">

            <div class="app-container">
                <div class="box" style="height: 900px">

                    <div class="excelTime">日期：{{reportData.reportDate}}</div>
                    <table class="memberData" >
                        <tr>
                            <h1>会员数据统计</h1>
                        </tr>
                        <tr>
                            <td>

                                    <el-col :span="12">
                                        <el-card shadow="always" class="box1">
                                            新增会员数:{{reportData.todayNewMember}}
                                        </el-card>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-card shadow="hover" class="box2">
                                            总会员数:{{reportData.totalMember}}
                                        </el-card>
                                    </el-col>
                            </td>
                            <td>
                                    <el-col :span="12">
                                        <el-card shadow="never" class="box3">
                                            本周新增会员数:{{reportData.thisWeekNewMember}}
                                        </el-card>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-card shadow="never" class="box4">
                                            本月新增会员数:{{reportData.thisMonthNewMember}}
                                        </el-card>
                                    </el-col>

                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="box">
                                    <div id="show" style="width: 700px; height: 500px"></div>
                                </div>
                            </td>
                            <td>
                                <div class="box">
                                    <div id="show1" style="width: 700px; height: 500px"></div>
                                </div>
                            </td>

                        </tr>
<!--                        <tr>-->
<!--                            <td colspan="4" class="headBody">预约数据统计</td>-->
<!--                        </tr>-->
<!--                        <tr>-->
<!--                            <td class="tabletrBg">今日预约数</td>-->
<!--                            <td>{{reportData.todayOrderNumber}}</td>-->
<!--                            <td class="tabletrBg">今日到店数</td>-->
<!--                            <td>{{reportData.todayVisitsNumber}}</td>-->
<!--                        </tr>-->
<!--                        <tr>-->
<!--                            <td class="tabletrBg">本周预约数</td>-->
<!--                            <td>{{reportData.thisWeekOrderNumber}}</td>-->
<!--                            <td class="tabletrBg">本周到店数</td>-->
<!--                            <td>{{reportData.thisWeekVisitsNumber}}</td>-->
<!--                        </tr>-->
<!--                        <tr>-->
<!--                            <td class="tabletrBg">本月预约数</td>-->
<!--                            <td>{{reportData.thisMonthOrderNumber}}</td>-->
<!--                            <td class="tabletrBg">本月到店数</td>-->
<!--                            <td>{{reportData.thisMonthVisitsNumber}}</td>-->
<!--                        </tr>-->


<!--                        <tr>-->
<!--                            <td colspan="4" class="headBody">热门套餐</td>-->
<!--                        </tr>-->
<!--                        <tr class="tabletrBg textCenter">-->
<!--                            <td>套餐名称</td>-->
<!--                            <td>预约数量</td>-->
<!--                            <td>占比</td>-->
<!--                            <td>备注</td>-->
<!--                        </tr>-->
<!--                        <tr v-for="s in reportData.hotSetmeal">-->
<!--                            <td>{{s.name}}</td>-->
<!--                            <td>{{s.setmeal_count}}</td>-->
<!--                            <td>{{s.proportion}}</td>-->
<!--                            <td>{{s.remark}}</td>-->
<!--                            <td></td>-->
<!--                        </tr>-->
                    </table>
                </div>
            </div>
        </div>
    </body>
    <!-- 引入组件库 -->
    <script src="../js/vue.js"></script>
    <script src="../plugins/elementui/index.js"></script>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script src="../js/axios-0.18.0.js"></script>
    <script src="../js/echarts.js"></script>

<!--    饼图-->
    <script>
        var vue = new Vue({
            el: '#app',
            data:{
                reportData:{
                    reportDate:null,
                    todayNewMember :0,//本日新增会员数
                    totalMember :0,//总会员数
                    thisWeekNewMember :0,//本周新增会员数
                    thisMonthNewMember :0,//本月新增会员数
                    todayOrderNumber :0,//今日预约数
                    todayVisitsNumber :0,//今日到诊数
                    thisWeekOrderNumber :0,//本周预约数
                    thisWeekVisitsNumber :0,//本周到诊数
                    thisMonthOrderNumber :0,//本月预约数
                    thisMonthVisitsNumber :0,//本月到诊数
                    hotSetmeal :[]
                }
            },
            created() {
                axios.get("/business").then(resp=>{
                   this.reportData=resp.data.data;
                });
            },
            methods:{
                exportExcel(){
                    window.location.href = '../template/ordersetting_template.xlsx';
                }
            }
        })
    </script>
<!--    柱状图-->
    <script>
        let myecharts = echarts.init(document.getElementById("show"));

        //异步请求
        axios.get("/member/countMemberBySex").then(resp =>{
            if (resp.data.flag){
                let echartsData=resp.data.data;
                // 指定图表的配置项和数据
                var option = {
                    title: {
                        text: '男女比例',
                        subtext: '本季度',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left'
                    },
                    series: [
                        {
                            name: '男女比例',
                            type: 'pie',
                            radius: '50%',
                            data: echartsData,
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };
                // 使用刚指定的配置项和数据显示图表。
                myecharts.setOption(option);
            }else{
                this.$message.error(resp.data.message);
            }
        })

        let myecharts1 = echarts.init(document.getElementById("show1"));
        axios.get("/member/countMemberByRegTime/2022").then(resp =>{
            if (resp.data.flag){
                console.log(resp);
                let echartsData=resp.data.data;
                console.log(name)
                // 指定图表的配置项和数据
                var option = {
                    title: {
                        text: '统计2022年，1-12月各个月份新注册的会员数据'
                    },
                    tooltip: {},
                    legend: {
                        data: ['数据']
                    },
                    xAxis: {
                        type: 'category',
                        data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
                    },
                    yAxis: {
                        type:'value',
                        min:0,
                        max:10
                    },
                    series: [
                        {
                            data: echartsData,
                            type: 'bar',
                            showBackground: true,
                            backgroundStyle: {
                                color: 'rgba(180, 180, 180, 1)'
                            }
                        }
                    ]
                };
                // 使用刚指定的配置项和数据显示图表。
                myecharts1.setOption(option);
            }else{
                this.$message.error(resp.data.message);
            }
        })



    </script>
</html>
